import React, { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import './DocumentViewerScrollbar.css';

// Define document types
export enum DocumentType {
  TermsConditions = 'TermsConditions',
  Privacy = 'privacy',
  AboutUs = 'boutUs' // Note: the file is named 'boutUs' in assets
}

// 硬编码所有文档内容
const DOCUMENTS = {
  TermsConditions: {
    CN: `最终用户许可协议​​
本《最终用户许可协议》（以下简称"本协议"）是您（个人或单一实体）与Know1开发团队（以下简称"许可方"）之间就使用Know1网站及相关服务（以下简称"本服务"）所达成的法律协议。​​您对本服务的任何使用行为均构成对本协议的接受​​。

1、 ​​许可授予​​
许可方授予您一项​​可撤销、非排他性、不可转让的有限许可​​，​​仅允许​​您为个人非商业目的使用本服务。

2、 ​​使用限制​​
您同意不得（且不得协助他人）：

​​对服务内容进行复制、修改或创建衍生作品​​
​​将服务用于分销、租赁等商业用途​​
​​尝试破解服务的技术保护措施​​（法律明确允许除外）
​​移除版权标识或实施任何干扰服务正常运行的行为​​
3. ​​关联协议​​
同意本协议即视为您​​同步接受​​《服务条款》《隐私政策》及通过引用纳入本协议的其他协议。

4. ​​知识产权与侵权责任​​
Know1所有权利归属许可方。发现侵权时，​​您有义务立即书面通知许可方​​。

5. ​​许可终止​​
若您违反本协议，许可方有权终止许可。终止后您​​应立即停止使用并删除所有服务相关内容​​。

6. ​​免责声明​​
本服务按"现状"提供，​​许可方明确免除所有明示或默示担保​​。

7. ​​责任限制​​
许可方不对以下情况承担责任：

​​服务中断或数据丢失​​
​​您因使用服务产生的间接损失​​
​​第三方通过服务实施的违法行为​​
8. ​​赔偿限额​​
许可方对您的全部责任（无论索赔形式）不超过您实际为Know1支付的金额。

9. ​​联系方式​​
如有疑问请联系：service@Know 1ai.com

10. ​​协议修改​​
许可方保留修改权利，​​继续使用视为接受修订条款​​。

11. ​​数据使用授权​​
您同意许可方收集​​必要技术数据​​用于服务维护与改进。`,
    EN: `​​END USER LICENSE AGREEMENT​​

This End User License Agreement ("Agreement") is a legal contract between you (either an individual or a single entity) and the Know1 development team ("Licensor") governing your use of the Know1 website and related services ("Service"). Your use of the Service constitutes your acceptance of this Agreement.

LICENSE GRANT
Licensor grants you a revocable, non-exclusive, non-transferable, limited license to use the Service solely for personal, non-commercial purposes.
USE RESTRICTIONS
You agree not to (and not to assist others to):
Reproduce, modify, or create derivative works of the Service
Use the Service for distribution, leasing or other commercial purposes
Attempt to circumvent technical protection measures (except where expressly permitted by law)
Remove copyright notices or interfere with normal Service operations
INCORPORATED AGREEMENTS
By accepting this Agreement, you also agree to be bound by the Terms of Service, Privacy Policy and any other incorporated agreements.
INTELLECTUAL PROPERTY
All rights in Know1 are owned by Licensor. You must immediately notify Licensor in writing of any infringement you become aware of.
TERMINATION
Licensor may terminate this license if you breach this Agreement. Upon termination, you must immediately cease all use and delete all Service-related materials.
DISCLAIMER
THE SERVICE IS PROVIDED "AS IS" WITHOUT WARRANTIES OF ANY KIND, EXPRESS OR IMPLIED.
LIMITATION OF LIABILITY
Licensor shall not be liable for:
Service interruptions or data loss
Any indirect damages from Service use
Illegal activities conducted through the Service by third parties
DAMAGE CAP
Licensor's total liability shall not exceed the amount you actually paid for Know1.
CONTACT
For questions, contact: service@Know 1ai.com
MODIFICATIONS
Licensor reserves the right to modify this Agreement. Continued use constitutes acceptance of revised terms.
DATA USE
You consent to Licensor collecting necessary technical data for Service maintenance and improvement.`,
    JP: `エンドユーザーライセンス契約​​

本「エンドユーザーライセンス契約」（以下「本契約」）は、お客様（個人または法人）とKnow1開発チーム（以下「ライセンサー」）との間で、Know1ウェブサイトおよび関連サービス（以下「本サービス」）の利用に関して締結される法的契約です。本サービスを利用することで、お客様は本契約の内容に同意したものとみなされます。

ライセンスの付与
ライセンサーは、お客様に対し、個人利用かつ非営利目的に限り、本サービスを使用するための、取消可能、非独占的、譲渡不可の限定的ライセンスを付与します。

利用制限
お客様は、以下の行為を行わないものとします（第三者に行わせることも含みます）：
本サービスの複製、改変、または派生物の作成
本サービスを販売、貸与、またはその他の商業目的で使用すること
法律で明確に認められている場合を除き、技術的保護手段を回避する行為
著作権表示を削除したり、本サービスの正常な提供を妨害する行為

関連契約
お客様が本契約に同意することで、『利用規約』『プライバシーポリシー』および本契約に基づくその他すべての関連規定にも同意したものとみなされます。

知的財産権
本サービスおよびKnow1に関するすべての権利・知的財産はライセンサーに帰属します。万が一、知的財産権の侵害を発見した場合は、速やかに書面でライセンサーへ通知してください。

ライセンスの終了
お客様が本契約の条件に違反した場合、ライセンサーはいつでもライセンスを終了できるものとします。ライセンス終了後は、直ちに本サービスの利用を中止し、関連するすべてのコンテンツを削除する必要があります。

免責事項
本サービスは「現状有姿」で提供されます。ライセンサーは、本サービスについて明示的または黙示的を問わず、いかなる保証も行いません。

責任の制限
ライセンサーは以下の事項について、一切の責任を負いません：
サービスの停止、中断、またはデータの消失
本サービスの利用により発生した間接的または付随的損害
第三者が本サービスを利用して行う不正行為

損害賠償の上限
ライセンサーの責任は、お客様がKnow1に実際に支払った金額を上限とします。

契約の変更
ライセンサーは、事前の通知なく本契約の内容を変更する権利を有します。変更後も本サービスを利用し続けた場合、変更後の内容に同意したものとみなされます。

データ利用の許諾
お客様は、本サービスの品質向上および運営のために必要な範囲で、技術データの収集・利用を許可するものとします。
`
  },
  privacy: {
    CN: `隐私声明
版本更新日期：2025年5月7日

本《隐私声明》（下称"本声明"）阐述Know1 研发团队（简称"Know1"、"我方"或"我们"）在全球运营过程中涉及用户信息处理的相关规范。

除特别说明外，本声明适用于Know1旗下所有网站平台、电子/数字产品服务（与本声明关联的）及线下运营项目（统称"服务"），服务范围覆盖欧盟、亚洲等全球区域。

当您开始使用服务，即视为接受本声明条款。若不同意相关条款，请立即停止使用服务。

本声明中未作定义的术语，均以《Know1服务协议》解释为准。

信息收集类型
我们可能获取以下类别信息：
A. 主动提交信息
涵盖：
● 电子邮箱
● 用户昵称
● 交易凭证（通过第三方支付渠道）
● 交互内容（聊天记录、图片素材、角色共享）
● 往来沟通记录

B. 技术自动获取数据
通过Cookie等机制收集：
● 终端设备参数（浏览器/操作系统类型）
● 网络标识符（IP地址/设备ID）
● 访问轨迹（时间戳/页面停留数据）
● 客户端版本信息

C. 使用行为数据
记录服务使用频次、功能交互模式等运营指标，用于服务优化。

D. 外部平台信息
经用户授权，从社交网络等第三方渠道获取的关联数据。

E. Cookie管理
用户可通过终端设置调整Cookie策略，但部分功能可能受限。

信息使用场景
主要应用于：
● 账户维护与服务交付
● 定制化内容推荐
● 服务通知与商业通讯
● 产品优化及功能迭代
● 风险控制与合规审查
● 法定义务履行

数据共享范围
在下列情形可能披露信息：
● 集团关联方（需遵循同等保密标准）
● 合作服务商（支付/技术支持等）
● 法定披露要求或权益保护需要
● 企业并购重组情形
● 用户主动公开的内容
● 取得明确授权的情形

数据分析与推广
分析服务：集成Google Analytics等统计分析工具
广告投放：未来可能采用第三方精准营销方案，用户可通过指定渠道选择退出

用户权利清单
依据属地法律可能享有：
● 信息查阅与更正权
● 数据处理限制请求权
● 同意撤回权
● 监管申诉权（欧盟用户）
● 属地法规赋予的其他权益
行权途径：
通过账户中心管理基础信息
通过退订链接终止推广信息
发送诉求至指定反馈通道

区域合规细则
遵循主要法域要求包括：
欧盟/英国：
GDPR合规框架
数据保护监管申诉机制
亚太地区：
符合当地个人信息保护条例
建立区域性数据管理规范
北美地区：
加州用户CCPA权益保障
内华达州用户反数据销售权

数据留存规则
● 按业务需求确定存储周期
● 高热度公开角色数据可能永久保留（维持社区生态）

未成年人保护
服务仅面向法定成年用户（18周岁或当地成年标准），禁止非授权收集未成年人信息。

安全防护体系
实施技术与行政防护手段保障数据安全，但无法承诺绝对安全。

跨境传输说明
信息可能在日本等境外服务器处理，使用服务视为同意跨境传输。我们将确保传输过程符合相关司法辖区要求。

第三方责任声明
不对第三方平台的内容与隐私措施承担责任。

声明更新机制
重大修订将通过显著方式告知，持续使用视为接受修订条款。

联络通道
咨询联系：ahsgcasdqasda22@gmail.com`,
    EN: `​​Privacy Statement​​

This ​​Privacy Statement​​ (hereinafter referred to as "​​this Statement​​") outlines the practices of the Know1 development team (hereinafter referred to as "​​Know1," "​​we​​," or "​​us​​") regarding the collection and processing of user information in our global operations.

Unless otherwise specified, this Statement applies to all websites, digital products/services (linked to this Statement), and offline services (collectively referred to as "​​Services​​") provided by Know1, covering users in the EU, Asia, and other regions worldwide.

By using our Services, you acknowledge and agree to the terms outlined in this Statement. If you do not agree, please refrain from accessing or using our Services.

Any undefined terms in this Statement shall have the meanings ascribed to them in the ​​Know1 Terms of Service​​.

​​Types of Information We Collect​​
We may collect the following categories of information:

​​A. Information You Provide Directly​​
Including but not limited to:
● Email address
● Username
● Payment details (via third-party payment processors)
● User-generated content (e.g., chat logs, uploaded images, shared roles)
● Communications with us

​​B. Automatically Collected Data​​
Collected via cookies and similar technologies:
● Device and browser specifications (browser/OS type)
● Network identifiers (IP address, device ID)
● Access logs (timestamps, page visit data)
● Service version information

​​C. Usage Data​​
Records of service engagement (frequency, interaction patterns, etc.) for optimization purposes.

​​D. Third-Party Information​​
Data obtained from social media or other external platforms (within authorized scope).

​​E. Cookie Management​​
You may adjust cookie settings via your device, though some features may be affected.

​​How We Use Your Information​​
Purposes include:
● Account maintenance and service delivery
● Personalized recommendations
● Service notifications and marketing communications
● Product improvements and feature development
● Fraud prevention and legal compliance
● Fulfillment of legal obligations

​​Disclosure of Information​​
We may share information under the following circumstances:
● With affiliated entities (subject to equivalent confidentiality standards)
● With service providers (e.g., payment processors, technical support)
● To comply with legal requirements or protect rights
● During corporate transactions (e.g., mergers)
● For user-generated content made public
● With explicit user consent

​​Analytics & Advertising​​
​​Analytics Services:​​ Integrated tools like Google Analytics.
​​Targeted Advertising:​​ Future third-party ad services may be used; opt-out options will be provided.

​​Your Rights​​
Depending on jurisdiction, you may have:
● ​​Access/Correction/Deletion​​ rights for personal data
● ​​Restriction/Objection​​ rights to certain processing
● ​​Withdrawal of Consent​​
● ​​Regulatory Complaint​​ rights (e.g., for EU users)
● Other rights under local laws

​​How to Exercise Rights:​​
● Manage account details via settings
● Unsubscribe from marketing via provided links
● Submit requests via designated feedback channels

​​Regional Compliance​​
We adhere to key regulations, including:
​​EU/UK:​​
● GDPR compliance
● Right to lodge complaints with supervisory authorities
​​Asia-Pacific:​​
● Local data protection laws
● Region-specific privacy safeguards
​​North America:​​
● CCPA rights for California residents
● Nevada residents' right to opt out of data sales

​​Data Retention​​
● Stored as necessary for operational purposes
● Popular public roles may be retained indefinitely (to preserve community experience)

​​Children's Privacy​​
Services are intended for users aged ​​18+​​ (or local age of majority). We do not knowingly collect minors' data without parental consent.

​​Security Measures​​
Technical and administrative safeguards are implemented, though absolute security cannot be guaranteed.

​​International Data Transfers​​
Data may be processed in jurisdictions like Japan. By using our Services, you consent to such transfers. We ensure compliance with applicable laws.

​​Third-Party Links​​
We are not responsible for third-party content or privacy practices.

​​Updates to This Statement​​
Material changes will be communicated prominently. Continued use constitutes acceptance.
​`,
    JP: `プライバシーポリシー

この「プライバシーポリシー」（以下「本ポリシー」）は、Know1 開発チーム（以下「Know1」「当社」または「私たち」）が、ユーザーの個人情報をどのように収集・利用・管理・共有するかについて定めたものです。

特に記載がない限り、本ポリシーは、Know1が提供するすべてのウェブサイト、デジタル製品およびサービス（本ポリシーへのリンクが付されたもの）、ならびにオフラインサービス（以下「サービス」）に適用されます。本ポリシーは、EU、アジアを含む全世界のユーザーを対象としています。

サービスをご利用いただくことで、ユーザーは本ポリシーに同意したものとみなされます。同意いただけない場合は、サービスの利用を中止してください。

1、 収集する情報の種類;
当社は以下の情報を収集する場合があります

A.ユーザーから直接提供される情報
● メールアドレス
● ユーザー名
● 支払い情報（第三者決済業者経由）
● ユーザー生成コンテンツ（チャット記録、アップロード画像、共有ロール等）
● 当社との通信履歴

​​B. 自動収集される情報
● 端末情報（ブラウザ、OSの種類など）
● ネットワーク識別子（IPアドレス、デバイスID）
● アクセスログ（タイムスタンプ、閲覧ページなど）
● サービスバージョン情報

​​C. 利用行動データ
サービスの利用頻度、機能の利用状況などを記録し、サービス改善に役立てます。

​​D. 第三者サービスから取得する情報
ソーシャルメディア等の外部サービスから、ユーザーの同意範囲内で情報を取得する場合があります。

​​E. Cookieの利用
Cookieの設定は端末から調整可能ですが、一部機能が制限される可能性があります。

​​2、情報の利用目的​​
主な利用場面：
● アカウント管理とサービス提供
● パーソナライズされたおすすめの提供
● サービス通知・マーケティングコミュニケーションの送信
● 製品改善・新機能開発
● 不正防止および法令順守のため
● 法的義務の履行

3、​情報の共有・開示
当社は、以下の場合に限り情報を共有することがあります：
● 当社グループ会社（同等の秘密保持義務を遵守）
● 業務委託先（決済処理、技術支援など）
● 法令に基づく要請または権利保護が必要な場合
● 企業合併・買収等の事業承継時
● ユーザーが公開したコンテンツ
● ユーザーの明示的同意がある場合

​4、分析・広告
分析ツール：Google Analytics等を使用し、サービス改善に役立てます。
​​ターゲティング広告：​将来的に第三者広告サービスを導入する可能性があり、その際は所定の方法でオプトアウト可能です。

5、​ユーザーの権利
地域法規に基づき、以下の権利を有します：
● 個人データの開示・訂正・削除の請求権
● ​​データ処理の制限・異議申立て権
● ​同意の撤回権
● EUユーザー：データ保護当局への苦情申立て権
● その他、現地法が認める権利

​権利の行使方法：
● アカウント設定で基本情報の管理
● マーケティング配信停止リンクから解除
● お問い合わせ窓口へリクエスト送信

​6、データの保存期間
業務上必要な期間のみ保管します。
​一部の人気公開ロールは、コミュニティ維持のために長期保存される場合があります。

7、未成年者のプライバシー
当社のサービスは18歳以上（または地域の成人年齢）のユーザーを対象としており、保護者の同意がない未成年者の情報収集は行いません。


8、セキュリティ対策
当社は技術的・組織的な対策を講じていますが、インターネット上での完全な安全性を保証するものではありません。


9、 国際データ移転
当社は日本等の海外サーバーでデータ処理を行う場合があり、サービスの利用をもってこれに同意いただいたものとみなされます。関連法規に基づき適切な措置を実施します。

10、 外部リンクについて
当社は外部サイトのコンテンツおよびプライバシー慣行について責任を負いません。

11、 本ポリシーの改定
重要な変更がある場合、適切な方法でお知らせします。引き続きサービスをご利用いただく場合、改定後のポリシーに同意したものとみなされます。

`
  },

  boutUs: {
    CN: `​​Know 1技术团队​​

Know 1技术团队创立于2025年3月8日，聚焦人工智能角色生成、跨平台软件开发及数字媒体生态整合。业务网络覆盖全球主要市场，通过智能技术创新持续输出沉浸式AI交互体验。

团队汇聚国际顶尖AI研发人才与算法科学家，依托持续技术深耕，成功将多项专利技术应用于核心平台。我们的解决方案以用户需求为导向，凭借卓越功能设计与行业领先性能，在全球范围内获得专业机构认证及用户口碑赞誉。

​​联络方式​​
ahsgcasdqasda22@gmail.com`,
    EN: `​​Know1 Technology Team​​

Established on March 8, 2025, the Know1 Technology Team specializes in ​​AI-driven character generation​​, ​​cross-platform software development​​, and ​​digital media ecosystem integration​​. Our operations span major global markets, delivering immersive AI interactive experiences through continuous technological innovation.

The team comprises ​​world-class AI R&D talents​​ and ​​algorithm scientists​​ from diverse international backgrounds. By persistently advancing proprietary technologies, we have successfully integrated multiple patented innovations into our core platform. Our ​​user-centric solutions​​ prioritize market demands, combining ​​innovative functionality​​ with ​​industry-leading performance​​, earning ​​professional certifications​​ and ​​global user acclaim​​.

​​Contact​​
ahsgcasdqasda22@gmail.com`,
    JP: `​​Know 1テクノロジーチーム​​

Know 1テクノロジーチームは2025年3月8日に設立され、​​AIキャラクター生成​​、​​クロスプラットフォームソフトウェア開発​​、​​デジタルメディアエコシステム統合​​に特化しています。事業ネットワークは世界の主要市場を網羅し、知能技術革新を通じて没入型AIインタラクション体験を継続的に提供しています。

​​国際的なAI専門家集団​​：
世界トップクラスのAI開発者とアルゴリズム科学者が結集。継続的な技術深化により、複数の特許技術を中核プラットフォームに実装。ユーザーニーズを起点としたソリューション設計と業界最高水準のパフォーマンスで、国際認証機関の厳格な評価を取得するとともに、グローバルユーザーからの信頼を獲得しています。

​​連絡先​​
ahsgcasdqasda22@gmail.com`
  }
};

const DocumentViewer: React.FC = () => {
  const { type } = useParams<{ type: string }>();
  const { i18n, t } = useTranslation();
  const [content, setContent] = useState<string>('');
  const [loading, setLoading] = useState<boolean>(true);
  const [error, setError] = useState<boolean>(false);

  // 切换语言
  const changeLanguage = (lang: string) => {
    i18n.changeLanguage(lang);
  };

  // 获取当前语言对应的文档后缀
  const getCurrentLanguageSuffix = (): string => {
    const lang = i18n.language;
    if (lang.startsWith('zh')) return 'CN';
    if (lang.startsWith('ja')) return 'JP';
    return 'EN'; // 默认使用英文
  };

  useEffect(() => {
    // 加载文档内容
    const loadDocument = () => {
      try {
        setLoading(true);
        setError(false);

        // 验证文档类型
        if (!type || !Object.values(DocumentType).includes(type as DocumentType)) {
          // console.error('无效的文档类型:', type);
          console.error('invalid document type', type);
          setError(true);
          return;
        }

        const langSuffix = getCurrentLanguageSuffix();

        // 从硬编码内容中获取文档
        const documentContent = DOCUMENTS[type as keyof typeof DOCUMENTS]?.[langSuffix as keyof typeof DOCUMENTS[keyof typeof DOCUMENTS]];

        if (documentContent) {
          setContent(documentContent);
        } else {
          // console.error(`找不到文档: ${type}(${langSuffix})`);
          console.error(`document not found: ${type}(${langSuffix})`);
          setError(true);
        }
      } catch (err) {
        // console.error('加载文档出错:', err);
        console.error('load document failed', err);
        setError(true);
      } finally {
        setLoading(false);
      }
    };

    loadDocument();
  }, [type, i18n.language]);

  // 根据类型获取文档标题
  const getDocumentTitle = (): string => {
    switch (type as DocumentType) {
      case DocumentType.TermsConditions:
        return t('document.terms');
      case DocumentType.Privacy:
        return t('document.privacy');
      case DocumentType.AboutUs:
        return t('document.aboutUs');
      default:
        return '';
    }
  };

  // 格式化内容，处理段落和标题（段落内遇到\n也换行，邮箱自动转为链接）
  const formatContent = (text: string): JSX.Element[] => {
    if (!text) return [];

    // 邮箱正则
    const emailRegex = /([a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+)/g;

    // 将文本分割成段落
    const paragraphs = text.split('\n\n');

    // 辅助函数：将一行中的邮箱转为链接
    const renderLineWithEmail = (line: string, key?: React.Key) => {
      const parts = line.split(emailRegex);
      return parts.map((part, idx) => {
        if (emailRegex.test(part)) {
          return <a key={key ? `${key}-email-${idx}` : `email-${idx}`} href={`mailto:${part}`} className="text-pink-400 underline break-all">{part}</a>;
        }
        return <React.Fragment key={key ? `${key}-text-${idx}` : `text-${idx}`}>{part}</React.Fragment>;
      });
    };

    return paragraphs.map((paragraph, index) => {
      const trimmedParagraph = paragraph.trim();

      // 检查是否是主标题（以"："结尾且长度较短）
      if (trimmedParagraph.endsWith('：') && trimmedParagraph.length < 50) {
        // 检查是否是数字开头的标题（如"2. 使用限制")
        if (/^\d+\.\s/.test(trimmedParagraph)) {
          return <h2 key={index} className="text-xl font-bold mb-4 mt-8">{trimmedParagraph}</h2>;
        }
        // 其他主标题居中显示
        return <h2 key={index} className="text-xl font-bold mb-4 mt-8 text-center">{trimmedParagraph}</h2>;
      }

      // 检查是否是子标题（以字母+点开头，如"A.")
      if (/^[A-Z]\.\s/.test(trimmedParagraph)) {
        const [title, ...content] = trimmedParagraph.split('\n');
        return (
          <div key={index} className="mb-6">
            <h3 className="text-lg font-extrabold mb-3 text-pink-500">{title}</h3>
            {content.length > 0 && (
              <div className="pl-4">
                {content.map((line, lineIndex) => (
                  <React.Fragment key={lineIndex}>
                    {renderLineWithEmail(line, lineIndex)}
                    <br />
                  </React.Fragment>
                ))}
              </div>
            )}
          </div>
        );
      }

      // 段落内遇到\n也换行，并处理邮箱
      const lines = trimmedParagraph.split('\n');
      return (
        <p key={index} className="mb-4 text-justify leading-relaxed">
          {lines.map((line, lineIndex) => (
            <React.Fragment key={lineIndex}>
              {renderLineWithEmail(line, lineIndex)}
              {lineIndex !== lines.length - 1 && <br />}
            </React.Fragment>
          ))}
        </p>
      );
    });
  };

  return (
    <div className="min-h-screen bg-gray-900 text-white py-8">
      <div className="container mx-auto px-4 sm:px-6 lg:px-8">
        {/* 语言切换按钮 */}
        <div className="flex justify-end mb-6 space-x-2">
          {/* <button
            onClick={() => changeLanguage('zh')}
            className={`px-3 py-1 rounded-full text-sm font-medium transition-colors ${i18n.language.startsWith('zh')
              ? 'bg-pink-600 text-white'
              : 'bg-gray-700 text-gray-300 hover:bg-gray-600'
              }`}
          >
            中文
          </button> */}
          <button
            onClick={() => changeLanguage('en')}
            className={`px-3 py-1 rounded-full text-sm font-medium transition-colors ${i18n.language === 'en'
              ? 'bg-pink-600 text-white'
              : 'bg-gray-700 text-gray-300 hover:bg-gray-600'
              }`}
          >
            English
          </button>
          <button
            onClick={() => changeLanguage('ja')}
            className={`px-3 py-1 rounded-full text-sm font-medium transition-colors ${i18n.language === 'ja'
              ? 'bg-pink-600 text-white'
              : 'bg-gray-700 text-gray-300 hover:bg-gray-600'
              }`}
          >
            日本語
          </button>
        </div>

        {/* 文档标题 */}
        <h1 className="text-2xl sm:text-3xl font-bold text-center mb-8 text-pink-500">
          {getDocumentTitle()}
        </h1>

        {/* 内容 */}
        <div className="mt-6">
          {loading ? (
            <div className="flex justify-center items-center py-10">
              <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-pink-500"></div>
            </div>
          ) : error ? (
            <div className="text-center py-10">
              <p className="text-red-500 mb-4">{t('document.error')}</p>
            </div>
          ) : (
            <div
              className="prose prose-invert prose-pink max-w-3xl p-6 mx-auto overflow-y-auto custom-scrollbar"
              style={{ maxHeight: '70vh' }}
            >
              {formatContent(content)}
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

export default DocumentViewer; 